<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>添加地址</title>
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">
		<style>
			html,body{height: 100%;overflow:auto;background-color: #fff;}
			.total_txt{font-size: .3rem; margin-top:.15rem; height: .5rem; line-height: .65rem; padding-left: .3rem;}
			.mui-content{margin-bottom: 1rem;}
			.mui-media-body{width: 80%;}
            .mui-media-body>p{margin-top: .05rem;}
            .mui-table-view{background:none;}
            .mui-table-view-cell{margin-bottom: .1rem; padding:.25rem; box-sizing: border-box; background-color: #fff;}
            
			.box3{width: 7.5rem;height: 0.98rem;position:fixed;bottom: 0;left:0; margin-top: 1rem; background-color: #fff;}
			.box3 .mui-table-view-cell:first-child{height: 2.23rem;}
			.box3 .mui-table-view-cell:last-child{height:0.98rem;color: #1653fc;text-align: center;line-height: 0.5rem;background: url(../../../images/menu/add.png) no-repeat center center;background-position-x: 2.5rem;background-size: 0.42rem; font-size: .32rem}
		</style>
	</head>
	<body>
		<div class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">收货地址</h1>
		</div>
	        <div class="mui-content" id="content">
	        	<p class="total_txt">共{{addresses.length}}个收货地址</p>
	            <ul class="mui-table-view">
	            	<template v-for="address in addresses">
	            		<li v-on:click="selectAddr" :id="address.oid" class="mui-table-view-cell mui-media">
		                    <a href="javascript:;">
		                    	<button type="button" class="mui-btn mui-btn-blue mui-pull-right">选择</button>
		                        <div class="mui-media-body">
		                        	<span class="mui-right" v-text="address.addresseeName"></span>
			                    	<font size="2" v-text=" ' - '+address.addresseePhone">1</font>
		                            <p class="mui-ellipsis" v-text="address.addresseeAddress"></p>
		                        </div>
		                    </a>
		                </li>
	        		</template>
	            </ul>
	        </div>
			<ul class="mui-table-view box3">
			    <li id="edit_address" class="mui-table-view-cell" >管理地址</li>
			</ul>
	</body>
	<script>
		var my_immersed = function(immersed) {
			document.getElementById("header").style.paddingTop = immersed + 'px';
			document.getElementById("header").style.height = (immersed + 44)+'px';
			document.getElementById("content").style.paddingTop = (immersed + 44) + 'px';
		}
	</script>
	<script type="text/javascript" src="../../../js/immersed.js" ></script>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/jquery2.2.4.min.js"></script>
	<script src="../../../js/common.js"></script>
	<script type="text/javascript" src="../../../js/app.js" ></script>
	<script type="text/javascript" src="../../../js/vue.min.js" ></script>
	<script>
		(function(mui,$){
			mui.init();
			mui.plusReady(function(){
				loadAddressList();
				document.getElementById("edit_address").addEventListener('tap',function(){
					var param = jsonToParams({
						viewId:plus.webview.currentWebview().id
					})
					showTemplates('addressLi.html','收货地址','_www/src/my/address.html?'+param);
				});
				document.addEventListener('loadAddressList',function(){
					loadAddressList();
				})
			})
			var addr_vm = new Vue({
				el:"#content",
				data:{
					addresses:[]
				},
				methods:{
					selectAddr:function(){
						var ele = event.currentTarget;
						mui.fire(plus.webview.getWebviewById("netCase/caseRegStep2"),"selectedAddr",{
							addressId:ele.id,
							addressName:$(ele).find('.mui-ellipsis').text(),
							viewId : plus.webview.currentWebview().id
						})
					}
				}
			})
			/**
			 * 加载收货地址列表数据
			 * @param {Object} userId 用户主键
			 */
			function loadAddressList() {
				var param = 'userId=' + getUserId();
				var url = 'appHttpService/appUserAddressList.do';
				utils.ajax(url, function(data) {
					data = JSON.parse(data);
					if(data.code == 0 && data.total != null) {
						var netUserAddressList = JSON.parse(data.netUserAddressList);
						addr_vm.addresses = netUserAddressList;
					}
				}, param);
			};
		}(mui,jQuery))
		
	</script>
</html>